<template>
  <div class="xzdz">
    <div class="title">
      <span @click="$router.go(-1)">返回</span>
      <span>新增地址</span>
      <span @click="bc">保存</span>
    </div>
    <div class="bd">
      <li>
        <span class="s1">收货人</span>
        <input type="text" v-model="obj.shr" />
      </li>
    </div>
    <div class="bd">
      <li>
        <span class="s1">联系方式</span>
        <input type="text" v-model="obj.dh" />
      </li>
    </div>
    <div class="bd">
      <li class="l1" @click="tcc">
        <span class="s1">所在地区</span>
        <span>{{ ">" }}</span>
      </li>
    </div>
    <van-popup
      v-model:show="obj.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        ref="jl"
        @confirm="aaa"
        @change="bbb"
        title=""
        :columns="scc.columns"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";
import { getsheng } from "../http/api.js";
const jl = ref(null);
const obj = reactive({
  shr: "",
  dh: "",

  show: false,
 
});


const bbb = () => {
  
};
// 点击级联
const aaa = (a) => {
};
// 点击显示弹出层
const tcc = () => {
  obj.show = true;
};
// 获取省
const hqs =  () => {
  
};

hqs();
</script>
<style lang="scss" scoped>
.bd {
  padding: 35px 20px 15px 20px;
  .s1 {
    display: inline-block;
    width: 20%;
    font-size: 26px;
  }
  .l1 {
    display: flex !important;
    justify-content: space-between !important;
  }
  input {
    border: none;
    height: 50px;
    font-size: 26px;
  }
  li {
    border-bottom: 1px solid #ccc;
    margin: 10px 0;
  }
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.title {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  span {
    font-size: 26px;
  }
}
</style>
